<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [v-cloak] {
            display: none;
        }
        *{
            margin:0;
            padding:0;
        }
        body{
            font-family:Microsoft YaHei;
        }
        li{
            list-style:none;
        }
        .bar{
            background-color:#5c9bb7;
            border-radius: 2px;
            width: 580px;
            padding: 10px;
            margin: 45px auto 25px;
            position:relative;
            text-align:right;
            line-height: 1;
        }
        .bar a{
            background:#4987a1 center center no-repeat;
            width:32px;
            height:32px;
            display:inline-block;
            text-decoration:none !important;
            margin-right:5px;
            border-radius:2px;
            cursor:pointer;
        }
        .bar a.active{
            background-color:#c14694;
        }
        .bar a.list-icon{
            background-image:url();
        }

        .bar a.grid-icon{
            background-image:url();
        }
        ul.grid{
            width: 570px;
            margin: 0 auto;
            text-align: left;
        }
        ul.grid li{
            padding: 2px;
            float:left;
        }
        ul.grid li img{
            width:280px;
            height:280px;
            object-fit: cover;
            display:block;
            border:none;
        }
        ul.list{
            width: 500px;
            margin: 0 auto;
            text-align: left;
        }

        ul.list li{
            border-bottom: 1px solid #ddd;
            padding: 10px;
            overflow: hidden;
        }

        ul.list li img{
            width:120px;
            height:120px;
            float:left;
            border:none;
        }

        ul.list li p{
            margin-left: 135px;
            font-weight: bold;
            color:#6e7a7f;
        }

    </style>
    <script src="http://cdn.bootcss.com/vue/2.1.10/vue.js"></script>
</head>
<body>
<div id="main" v-cloak>
    <div class="bar">
        <a class="grid-icon" v-bind:class="{ 'active': layout == 'grid'}" v-on:click="layout = 'grid'"></a>
        <a class="list-icon" v-bind:class="{ 'active': layout == 'list'}" v-on:click="layout = 'list'"></a>
    </div>
    <ul v-if="layout == 'grid'" class="grid">
        <li v-for="a in articles">
            <a v-bind:href="a.url" target="_blank"><img v-bind:src="a.image.large" /></a>
        </li>
    </ul>
    <ul v-if="layout == 'list'" class="list">
        <li v-for="a in articles">
            <a v-bind:href="a.url" target="_blank"><img v-bind:src="a.image.small" /></a>
            <p>{{a.title}}</p>
        </li>
    </ul>
</div>
</body>
<script>
    var demo = new Vue({
        el: '#main',
        data: {
            layout: 'grid',
            articles: [{
                "title": "What You Need To Know About CSS Variables",
                "url": "http://tutorialzine.com/2016/03/what-you-need-to-know-about-css-variables/",
                "image": {
                    "large": "http://cdn.tutorialzine.com/wp-content/uploads/2016/03/css-variables.jpg",
                    "small": "http://cdn.tutorialzine.com/wp-content/uploads/2016/03/css-variables-150x150.jpg"
                }
            },
                {
                    "title": "Freebie: 4 Great Looking Pricing Tables",
                    "url": "http://tutorialzine.com/2016/02/freebie-4-great-looking-pricing-tables/",
                    "image": {
                        "large": "http://cdn.tutorialzine.com/wp-content/uploads/2016/02/great-looking-pricing-tables.jpg",
                        "small": "http://cdn.tutorialzine.com/wp-content/uploads/2016/02/great-looking-pricing-tables-150x150.jpg"
                    }
                },
                {
                    "title": "20 Interesting JavaScript and CSS Libraries for February 2016",
                    "url": "http://tutorialzine.com/2016/02/20-interesting-javascript-and-css-libraries-for-february-2016/",
                    "image": {
                        "large": "http://cdn.tutorialzine.com/wp-content/uploads/2016/02/interesting-resources-february.jpg",
                        "small": "http://cdn.tutorialzine.com/wp-content/uploads/2016/02/interesting-resources-february-150x150.jpg"
                    }
                },
                {
                    "title": "Quick Tip: The Easiest Way To Make Responsive Headers",
                    "url": "http://tutorialzine.com/2016/02/quick-tip-easiest-way-to-make-responsive-headers/",
                    "image": {
                        "large": "http://cdn.tutorialzine.com/wp-content/uploads/2016/02/quick-tip-responsive-headers.png",
                        "small": "http://cdn.tutorialzine.com/wp-content/uploads/2016/02/quick-tip-responsive-headers-150x150.png"
                    }
                },
                {
                    "title": "Learn SQL In 20 Minutes",
                    "url": "http://tutorialzine.com/2016/01/learn-sql-in-20-minutes/",
                    "image": {
                        "large": "http://cdn.tutorialzine.com/wp-content/uploads/2016/01/learn-sql-20-minutes.png",
                        "small": "http://cdn.tutorialzine.com/wp-content/uploads/2016/01/learn-sql-20-minutes-150x150.png"
                    }
                },
                {
                    "title": "Creating Your First Desktop App With HTML, JS and Electron",
                    "url": "http://tutorialzine.com/2015/12/creating-your-first-desktop-app-with-html-js-and-electron/",
                    "image": {
                        "large": "http://cdn.tutorialzine.com/wp-content/uploads/2015/12/creating-your-first-desktop-app-with-electron.png",
                        "small": "http://cdn.tutorialzine.com/wp-content/uploads/2015/12/creating-your-first-desktop-app-with-electron-150x150.png"
                    }
                }]

        }
    });
</script>
</html>